<template>
  <view class="padding-lg bg-gray" style="min-height:100vh">

    <view class="padding bg-white margin-top">
      <evan-form :hide-required-asterisk="false" :label-style="labelStyles" 
        ref="form" :model="formInfo" class="no-bottom-border">

        <evan-form-item label="患者姓名：" prop="uname" label-position="top">
          <view class="i-input">
            <input disabled type="text" v-model="formInfo.uname" placeholder="请输入" />
          </view>
        </evan-form-item>
        <evan-form-item label="姓名(陪护)：" prop="rela_name" label-position="top">
          <view class="i-input">
            <input type="text" v-model="formInfo.rela_name" placeholder="请输入" />
          </view>
        </evan-form-item>
        <evan-form-item label="性别(陪护)：" prop="rela_sex" label-position="top">
          <radio-group @change="onSexChange" style="width:100%">
            <label class="margin-right" v-for="(it, i) in sexOpts" :key="it.value">
              <text class="margin-right-xs">
                {{it.label}}
              </text>
              <radio :value="it.value" :checked="it.value === formInfo.sex" />
            </label>
          </radio-group>
        </evan-form-item>
        <evan-form-item label="身份证号(陪护)：" prop="rela_idnum" label-position="top">
          <view class="i-input">
            <input type="text" v-model="formInfo.rela_idnum" placeholder="请输入" />
          </view>
        </evan-form-item>
        <evan-form-item label="电话(陪护)：" prop="rela_tel" label-position="top">
          <view class="i-input">
            <input type="text" v-model="formInfo.rela_tel" placeholder="请输入" />
          </view>
        </evan-form-item>
        <evan-form-item label="地址(陪护)：" prop="rela_addr" label-position="top">
          <view class="i-input">
            <input type="text" v-model="formInfo.rela_addr" placeholder="请输入" />
          </view>
        </evan-form-item>

        <view class="margin-top-xl">
          <button :disabled="submiting" @click="onSubmit" class="cu-btn lg btn-fluid bg-primary">提交</button>
        </view>
      </evan-form>
    </view>
    
    <cu-bar></cu-bar>
  </view>
</template>

<script>
import CheckAuthMixin from '@/mixins/CheckAuthMixin'
import checkIdCard from '@/libs/checkIdCard' 
const isMobilePhone = (value) => {
  const reg = /^1\d{10}$/
  if (reg.test(value)) {
    return true
  }
  return false
}

const CACHE_KEY = 'ts_matters_submiting'

const FormInfo = {
  uname: '',
  pat_idnum: '',
  rela_idnum: '',
  rela_name: '',
  rela_sex: '',
  rela_addr: '',
  rela_tel: ''
}

export default {
  mixins: [
    CheckAuthMixin,
  ],
  data() {
    return {
      needCheckAuth: false,
      labelStyles: {
        minWidth: '80px',
        textAlign: 'justify',
        paddingRight: '30upx',
        fontSize: '30upx',
        color: 'inherit',
      },
      submiting: false,
      formInfo: Object.assign({}, FormInfo),
      formRules: {
        // rela_name: [
        //   { required: true, message: '请输入陪护姓名' },
        // ],
        // rela_sex: [
        //   { required: true, message: '请选择陪护性别' },
        // ],
        // rela_addr: [
        //   { required: true, message: '请输入陪护地址' },
        // ],
        rela_idnum: [
          // { required: true, message: '请输入陪护身份证号' },
          {
            validator: (rule, value, callback) => {
              if (value && !checkIdCard(value)) {
                callback(new Error('请输入正确的身份证号'))
              } else {
                callback()
              }
            },
          }
        ],
        rela_tel: [
          // { required: true, message: '请输入陪护手机号' },
          {
            validator: (rule, value, callback) => {
              if (value && !isMobilePhone(value)) {
                callback(new Error('请输入正确的手机号'))
              } else {
                callback()
              }
            },
          }
        ],
      },
      sexOpts: [
        { label: '男', value: '1'},
        { label: '女', value: '2'},
      ],
    }
  },
  watch: {
    submiting(val) {
      if (val) {
        uni.showLoading()
      } else {
        uni.hideLoading()
      }
    },
  },
  onLoad(opts) {
    this.$utils.pLog('== onLoad: ', this.formInfo)
    this.loadState()
  },
  mounted() {
    this.$refs.form.setRules(this.formRules)
  },
  methods: {
    onSexChange(e) {
      this.formInfo.rela_sex = e.detail.value
    },
    onSubmit() {
      this.$refs.form.validate((res) => {
        if (res) {
          this.$utils.pLog('== submiting: ', this.formInfo)
          const { uname, pat_idnum, rela_idnum, rela_name, rela_sex, rela_addr, rela_tel } = this.formInfo
          this.$http({
            url: '/api/InHospital/Book',
            method: 'POST',
            data: {
              pat_idnum,
              rela_idnum,
              rela_name,
              rela_sex,
              rela_addr,
              rela_tel,
            },
            success: (res) => {
              if (res.success) {
                uni.showToast({
                  title: '预约成功'
                })
                setTimeout(() => {
                  this.gotoRecords()
                }, 1500)
              } else {
                uni.showToast({
                  title: res.msg,
                  icon: 'none'
                })
              }
            }
          })
        }
      })
    },
    loadState() {
      const cached = this.$utils.tempPageData.get(CACHE_KEY)
      if (cached) {
        const { uname, idno } = cached
        Object.assign(this.formInfo, {
          uname,
          pat_idnum: idno,
        })
      }
    },
    gotoRecords() {
      uni.navigateTo({
        url: `/pages/hesuanyuyue/records/index`
      })
    },
  },
}
</script>

<style scoped>
.bg-cus-blue {
  background: #3182F8;
}
.no-bottom-border /deep/ .evan-form-item-container {
  border-bottom: none;
}
</style>